<template>
  <a-dropdown class="theme-change-dropdown" :trigger="['click']">
    <a-tooltip :title="'主题色'">
      <a-avatar class="pointer" :size="'small'" :style="{backgroundColor: primaryColor}" @click="e => e.preventDefault()">
      </a-avatar>
    </a-tooltip>
    <div slot="overlay" class="theme-change-dropdown-overlay">
      <a-tooltip class="setting-drawer-theme-color-colorBlock m-xss" v-for="(item, index) in colorList" :key="index">
        <template slot="title">
          {{ item.key }}
        </template>
        <!-- <a-tag :color="item.color" @click="changeColor(item.color)">
          <a-icon type="check" v-if="item.color === primaryColor"></a-icon>
        </a-tag> -->
        <a-avatar class="pointer" :size="'small'" :style="{backgroundColor: item.color}" @click="changeColor(item.color)">
        </a-avatar>
      </a-tooltip>
    </div>
  </a-dropdown>
</template>

<script>
import { mapGetters } from 'vuex'
import { colorList, updateTheme } from './settingConfig'

export default {
  name: 'ThemeChange',
  components: {
  },
  props: {
  },
  data () {
    return {
      colorList
    }
  },
  computed: {
    ...mapGetters({ primaryColor: 'color' })
  },
  mounted () {
  },
  methods: {
    changeColor (color) {
        if (this.primaryColor !== color) {
          updateTheme(color)
          this.$store.commit('color', color)
      }
    }
  },
  destroyed () {
  }
}
</script>
<style lang="less" scope>
.pointer{
  cursor: pointer;
}
.theme-change-dropdown-overlay{
  box-sizing: content-box;
  padding: 12px;
  background-color: #fff;
  width: 96px;
  display: flex;
  flex-flow: row wrap;
  align-content: space-around;
  border-radius: 6px;
  box-shadow:0 2px 8px rgba(0, 0, 0, 0.2) ;
}
</style>
